<template>
  <div class="openOrder">
    <div class="openOrderTop">
      <el-form ref="searchForm" :model="searchForm" :rules="feeDialogRules"  :inline="true" size="mini">
        <el-form-item label="账单号：" prop="billNum">
          <el-input v-model="searchForm.billNum" clearable></el-input>
        </el-form-item>
        <el-form-item label="时间范围：" prop="startDay">
          <el-date-picker v-model="searchForm.startDay" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
        </el-form-item>
        <el-form-item label="———" prop="endDay">
          <el-date-picker v-model="searchForm.endDay" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" clearable></el-date-picker>
        </el-form-item>
        <el-form-item prop="endDay">
          <el-button type="primary" @click="searchBtn">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="openOrderBox">
      <div class="openOrderLeft">
        <div class="openLeftTitle">账单列表</div>
        <div class="openLeftBtnBox">
          <el-button plain type="primary" size="mini" @click="printBill">重打印账单</el-button>
          <el-button plain type="primary" size="mini" @click="getMoney">财务收账</el-button>
          <el-button plain type="primary" size="mini" @click="sendBill">送出账单</el-button>
          <el-button plain type="primary" size="mini" @click="customerGetBill">客户收账</el-button>
          <el-button plain type="primary" size="mini" @click="payBill">付款账单</el-button>
          <el-button plain type="primary" size="mini" @click="backBill">退账处理</el-button>
          <el-button plain type="primary" size="mini" @click="getBackBill">收到退账账单</el-button>
          <el-button plain type="primary" size="mini" @click="invalid">作废</el-button>
          <el-button plain type="primary" size="mini" @click="updateBill">修改送账单位</el-button>
          <el-button plain type="primary" size="mini" @click="exportBtn">导出</el-button>
        </div>
        <div class="openLeftTableBox">
          <el-table :data="billTableData" border :height="billTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row @row-click="getBillCurrent">
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="chbBpsign" label="收支标识" width="120px" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="chbBillNo" label="账单号" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="chbPayer" label="支付人" width="110px" show-overflow-tooltip  sortable ></el-table-column>
            <el-table-column prop="chbTotal" label="总金额" show-overflow-tooltip  sortable></el-table-column>
            <el-table-column prop="chbCurrency" label="币种" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="tayExpensePayable" label="开账时间" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="chbStatus" label="账单状态" width="110px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="mslType" label="开账类型" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="chbSettlemode" label="结算方式" width="130px" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="chbAddress" label="开账地点" width="130px" show-overflow-tooltip sortable ></el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            ref="pagination"
            small
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="Pagination.currentPage"
            :page-sizes="Pagination.pageSizeList"
            :page-size="Pagination.pageSize"
            :layout="Pagination.layout"
            :total="Pagination.total">
          </el-pagination>
        </div>
      </div>
      <div class="openOrderRight">
        <div class="openLeftTitle" style="padding:20px 0 0 0;margin-bottom: 30px;height: 34px">账单状态</div>
        <div class="openRightTableBox">
          <el-table :data="orderTableData" border :height="orderTableHeight" :header-cell-style="{ textAlign: 'center' }" highlight-current-row>
            <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
            <el-table-column prop="blaHandleType" label="处理类型" show-overflow-tooltip sortable></el-table-column>
            <el-table-column prop="blaHandleTm" label="处理时间" show-overflow-tooltip sortable ></el-table-column>
            <el-table-column prop="blaHandleUser" label="处理人员" show-overflow-tooltip  sortable ></el-table-column>
          </el-table>
        </div>
      </div>
    </div>


    <!-- 账单打印弹窗 -->
    <el-dialog title="编辑备注" :visible.sync="billPrintDialog" width="30%" :close-on-click-modal='false' v-el-drag-dialog>
      <div class="printBox">
        <span>备注：</span>
        <el-input type="textarea" v-model="printNote" style="width: 90%"></el-input>
      </div>

      <div class="printBtnBox">
        <el-button @click="billPrintDialog = false" size="mini">关闭</el-button>
        <el-button type="primary" @click="printSave" size="mini">保存</el-button>
      </div>
    </el-dialog>

    <!-- 退账处理 -->
    <el-dialog :title="backMoneyTitle" :visible.sync="backMoneyDialog" width="30%" :close-on-click-modal='false' v-el-drag-dialog>
      <el-form ref="backForm" :model="backForm" :rules="backRules"  :inline="true" size="mini">
        <el-form-item label="退账原因：" prop="backReason" v-if="backMoneyTitle == '客户退账'">
          <el-select v-model="backForm.backReason" filterable clearable>
            <el-option
              v-for="item in backList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              <span style="float: left;font-size: 12px;">{{ item.value }}</span>
              <span style="float: right; color: #8492a6;font-size: 12px;">{{ item.label }}</span>
              </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付人：" prop="payPeople" v-if="backMoneyTitle == '修改送账单位'">
          <el-select v-model="backForm.payPeople" filterable clearable>
            <el-option
              v-for="item in payPeopleList"
              :key="item.chbPaycstId"
              :label="item.chbPayer"
              :value="item.chbPaycstId">
              </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="printBtnBox">
        <el-button @click="backMoneyDialog = false" size="mini">关闭</el-button>
        <el-button type="primary" @click="backSave" size="mini">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import paginationMixin from '@/mixins/pagination'
import {getBillService,getBillStatusService,financialGetService,upDataBillService,payPeopleService} from '@/request/api'
export default {
  name: 'router.openOrderManage',
  mixins: [paginationMixin],
  data() {
    return {
      searchForm: {
        billNum: '', // 账单号
        startDay: '', // 开始时间
        endDay: '', // 结束时间
      },
      billTableData: [], // 账单列表 表格数据
      billTableHeight: 660, // 账单列表 表格高度
      orderTableData: [], // 订单列表 表格数据
      orderTableHeight: 660, // 订单列表 表格高度
      billCurrentData: '', // 账单列表当前行数据

      // 账单打印弹窗
      billPrintDialog: false, // 控制账单打印
      printNote: '', // 备注

      // 退账处理
      backForm:{
        backReason: '', // 退账原因
        payPeople: '', // 支付人
      },
      backRules: {
        backReason: [
          { required: true, message: '退账原因不能为空', trigger: 'blur' },
        ],
        payPeople: [
          { required: true, message: '支付人不能为空', trigger: 'blur' },
        ],
      },
      backMoneyTitle: '', // 标题
      backMoneyDialog: false, // 控制弹窗展示
      backList: [{label: '退账',value: '001'}], // 退账原因
      payPeopleList: [], // 支付人
    }
  },
  mounted() {
    this.searchForm.startDay = new Date((new Date()) - 7*24*3600*1000)
    this.searchForm.endDay = new Date()
    this.getSelectData()
  },
  methods: {
    // 搜索
    searchBtn() {
      // let startTimeLong = new Date(this.searchForm.startDay).getTime()
      // let endTimeLong = this.searchForm.endDay.getTime()
      if(this.searchForm.endDay) {
        this.searchForm.endDay = this.resolvingDate(this.searchForm.endDay)
      }
      let needArr = Object.assign(this.searchForm,{PageIndexs: this.Pagination.currentPage},{PageSizes: this.Pagination.pageSize})
      getBillService(needArr).then(res => {
        this.billTableData = res.data.FTKJWLHYPT
        this.Pagination.total = res.data.total.FTKJWLHYPT
      })
    },
    // 时间格式化
    resolvingDate(date) {
      let d = new Date(date)
      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1)
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate()

      let times = d.getFullYear() + '-' + month + '-' + day
      return times
    },
    // 重打印账单
    printBill() {
      this.billPrintDialog = true
    },
    // 财务收账
    getMoney() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }

      this.$confirm('确认要确认该数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        financialGetService({blaChbId: this.billCurrentData.chbId,blaHandleType: '30'}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '财务收账成功!'
            })
            this.getBillStatusData()
            this.searchBtn()
          }
        })
      }).catch(() => {
      })
    },
    // 送出账单
    sendBill() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('确认要确认该数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        financialGetService({blaChbId: this.billCurrentData.chbId,blaHandleType: '40'}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '送出账单成功!'
            })
            this.getBillStatusData()
            this.searchBtn()
          }
        })
      }).catch(() => {
      })
    },
    // 客户收账
    customerGetBill() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }

      this.$confirm('确认要确认该数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        financialGetService({blaChbId: this.billCurrentData.chbId,blaHandleType: '50'}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '客户收账成功!'
            })
            this.getBillStatusData()
            this.searchBtn()
          }
        })
      }).catch(() => {
      })
    },
    // 付款账单
    payBill() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }

      this.$confirm('确认要确认该数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        financialGetService({blaChbId: this.billCurrentData.chbId,blaHandleType: '60'}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '付款账单成功!'
            })
            this.getBillStatusData()
            this.searchBtn()
          }
        })
      }).catch(() => {
      })
    },
    // 退账处理
    backBill() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.backMoneyTitle = '客户退账'
      this.backMoneyDialog = true
    },
    // 修改送账单位
    updateBill() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.backMoneyTitle = '修改送账单位'
      this.backMoneyDialog = true
    },
    // 退账处理  弹窗  保存 按钮
    backSave() {
      if(this.backMoneyTitle == '客户退账') {
        this.$refs.backForm.validate(valid => {
          if(valid) {
            upDataBillService({blaChbId: this.billCurrentData.chbId,blaHandleType: '70',blaBadcause: this.backForm.backReason}).then(res => {
              if(res.success == 1) {
                this.$message({
                  type: 'success',
                  message: '退账成功'
                })
                this.backMoneyDialog = false
                this.getBillStatusData()
                this.searchBtn()
              }
            })
          }
        })
      }else if (this.backMoneyTitle == '修改送账单位') {
        this.$refs.backForm.validate(valid => {
          if(valid) {
            upDataBillService({blaChbId: this.billCurrentData.chbId,blaHandleType: '90',chbPayerId: this.backForm.payPeople}).then(res => {
              if(res.success == 1) {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })
                this.backMoneyDialog = false
                this.getBillStatusData()
                this.searchBtn()
              }
            })
          }
        })
      }
    },
    // 收到退账账单
    getBackBill() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }

      this.$confirm('确认要确认该数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        financialGetService({blaChbId: this.billCurrentData.chbId,blaHandleType: '71'}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '收到退账账单成功!'
            })
            this.searchBtn()
            this.getBillStatusData()
          }
        })
      }).catch(() => {
      })
    },
    // 作废
    invalid() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('确认要确认该数据么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        financialGetService({blaChbId: this.billCurrentData.chbId,blaHandleType: '80'}).then(res => {
          if(res.success == 1) {
            this.$message({
              type: 'success',
              message: '作废成功!'
            })
            this.searchBtn()
            this.getBillStatusData()
          }
        })
      }).catch(() => {
      })
    },

    // 导出
    exportBtn() {
      if(Object.keys(this.billCurrentData).length == 0) {
        this.$alert('请选择一条数据','提示',{
          confirmButtonText: '确定'
        })
        return
      }
    },
    // 获取账单列表当前行
    getBillCurrent(row) {
      this.billCurrentData = row
      console.log(this.billCurrentData)
      this.getBillStatusData()
    },
    // 查询  账单状态  数据
    getBillStatusData() {
      getBillStatusService({blaChbId: this.billCurrentData.chbId}).then(res => {
        if(res.success == 1) {
          this.orderTableData = res.data.FTKJWLHYPT
        }
      })
    },
    // 获取下拉框接口
    getSelectData() {
      payPeopleService().then(res => {
        if(res.success == 1) {
          this.payPeopleList = res.data.FTKJWLHYPT
        }
      })
    },
    // 账单打印 弹窗 保存
    printSave() {
      console.log('save')
    },
  }
}
</script>

<style lang="scss" scoped>
.openOrder {
  .openOrderTop {
    padding: 10px;
    padding-bottom: 0;
  }
  .openOrderBox {
    height: 100%;
    width: 100%;
    padding: 0 5px;
    display: flex;
    justify-content: space-between;
    .openOrderLeft {
      width: 69%;
      height: 768px;
      .openLeftBtnBox {
        padding-left: 15px;
        padding-bottom: 10px;
      }
      .block {
        padding-top: 10px;
      }
    }
    .openOrderRight {
      width: 30%;
      height: 768px;
    }
  }
}

.openLeftTitle {
  font-weight: bold;
  padding-left: 10px;
  margin-bottom: 10px;
}

.printBox {
  display: flex;
  justify-content: space-between;
}
.printBtnBox {
  padding-top: 10px;
  text-align: right;
}
</style>

